import * as React from "react";
import {BaseProps} from "../../App";
import {Dialog} from "@material-ui/core";
import DialogTitle from "@material-ui/core/DialogTitle";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogActions from "@material-ui/core/DialogActions";
import Button from "@material-ui/core/Button";
import Paper from "@material-ui/core/Paper";
import Draggable from 'react-draggable';
import ReactDOM from 'react-dom';
import {UUID} from "../../framework/util/UUID";

interface AppConfirmState {
    open: boolean,
    id: string
}

interface AppConfirmProps extends BaseProps {
    title: string,
    open?: boolean,
    id: string,
    onConfirm?: () => void,
    onClose?: () => void
}

class PaperComponent extends React.Component {
    render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | string | number | {} | React.ReactNodeArray | React.ReactPortal | boolean | null | undefined {
        return <Draggable handle="#draggable-dialog-title" cancel={'[class*="MuiDialogContent-root"]'}>
            <Paper {...this.props} />
        </Draggable>
    }
}

export class AppConfirm extends React.Component<AppConfirmProps, AppConfirmState> {

    constructor(props: AppConfirmProps) {
        super(props);
        this.handleCancel = this.handleCancel.bind(this);
        this.handleConfirm = this.handleConfirm.bind(this);
        this.state = {open: this.props.open === undefined ? true : this.props.open, id: this.props.id}
    }

    static open(props: { title: string, onClose?: () => void, onConfirm?: () => void }) {
        let divId = UUID.next();
        let divElement = document.createElement('div');
        divElement.setAttribute("id", divId);
        document.body.append(divElement);
        ReactDOM.render(this.getAppConfirm(props, divId), divElement);
    }

    private static getAppConfirm(props: { title: string, onClose?: () => void, onConfirm?: () => void },id:string) {
        return <AppConfirm id={id} title={props.title} open={true} onClose={props.onClose} onConfirm={props.onConfirm}/>;
    }

    private handleCancel() {
        this.setState({
            open: false
        }, () => {
            if (this.props.onClose){
                this.props.onClose();
            }
            let elementById = document.getElementById(this.state.id);
            if (elementById !== null) {
                document.body.removeChild(elementById);
            }
        });

    }

    private handleConfirm() {
        this.setState({open: false}, () => {
            if (this.props.onConfirm) {
                this.props.onConfirm();
            }
            let elementById = document.getElementById(this.state.id);
            if (elementById !== null) {
                document.body.removeChild(elementById);
            }
        })
    }

    render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | string | number | {} | React.ReactNodeArray | React.ReactPortal | boolean | null | undefined {
        return <div>
            <Dialog
                open={this.state.open}
                onClose={this.handleCancel}
                PaperComponent={PaperComponent}
                aria-labelledby="draggable-dialog-title"
            >
                <DialogTitle style={{cursor: 'move'}} id="draggable-dialog-title">
                    Subscribe
                </DialogTitle>
                <DialogContent>
                    <DialogContentText>
                        {this.props.title}
                    </DialogContentText>
                </DialogContent>
                <DialogActions>
                    <Button autoFocus onClick={this.handleCancel} color="primary">
                        取消
                    </Button>
                    <Button onClick={this.handleConfirm} color="primary">
                        确认
                    </Button>
                </DialogActions>
            </Dialog>
        </div>
    }
}




